<template>
	<view :style="skin" class="content contract">
		<view class="uploadMain">
			<view class="topLine" />
			<view class="tilte">
				{{$t('login.ContractUpload')}}
			</view>
			<view class="titleTips">
				{{$t('login.contractCheck')}}
			</view>
			<view class="uploadBox">
				<u-upload :fileList="fileList1" @afterRead="afterRead1" @delete="deletePic1" name="1" multiple :maxCount="1"
					width="300" height="150">

				</u-upload>
				<view class="uploadTips">
					{{$t('login.ClickUpload')}}<text>	{{$t('login.ContractFirst')}}</text>
				</view>
			</view>

			<view class="uploadBox">
				<u-upload :fileList="fileList2" @afterRead="afterRead2" @delete="deletePic2" name="2" multiple :maxCount="1"
					width="300" height="150">

				</u-upload>
				<view class="uploadTips">
					{{$t('login.ClickUpload')}}<text>{{$t('login.ContractStamped')}}</text>
				</view>
			</view>

		</view>

		<view class="btnModule">
			<u-button color="var(--subjectColor)" @click="handleNext">{{$t('login.nextPage')}}
			</u-button>
			<fui-safe-area></fui-safe-area>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		iconUpload
	} from '@/api/user.js'
	import {
		cloudmateURL
	} from '@/utils/requestURL.js'
	export default {
		data() {
			return {
				fileList1: [],
				fileList2: [],

				URL1: '',
				URL2: '',
			};
		},
		computed: {
			...mapState({
				skin: state => state.theme.skin
			})

		},
		onShow() {
			let that = this
			uni.setNavigationBarTitle({
				title: that.$t('login.Verification'),
			});
			let userObj = uni.getStorageSync('userObj');
			if(userObj.contractBookletPhoto){
				let arr = userObj.contractBookletPhoto.split(',')
				this.URL1 = arr[0]
				this.URL2 = arr[1]
				this.fileList1 = [{
					url:arr[0]
				}]
				this.fileList2 = [{
					url:arr[1]
				}]
			}
		},
		onLoad() {
			let that = this
			uni.setNavigationBarTitle({
				title: that.$t('login.Verification'),
			});
		},
		methods: {
			// 新增图片
			async afterRead1(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList1.length
				lists.map((item) => {
					this.fileList1.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})

				const result = await this.uploadFilePromise(lists[0].url, 1)
				let item = this.fileList1[fileListLen]
				this.fileList1.splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))

			},
			// 新增图片
			async afterRead2(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList2.length
				lists.map((item) => {
					this.fileList2.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})

				const result = await this.uploadFilePromise(lists[0].url, 2)
				let item = this.fileList2[fileListLen]
				this.fileList2.splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))

			},
			async uploadFilePromise(url, num) {
				let res = await iconUpload(url)
				let rrs = JSON.parse(res)
				
				if (rrs.code == 0) {
					console.log(cloudmateURL + rrs.data.url);
					if (num == 1) {
						this.URL1 = cloudmateURL + rrs.data.url
					} else {
						this.URL2 = cloudmateURL + rrs.data.url
					}
					return cloudmateURL + rrs.data.url
				}
			},

			// 删除图片
			deletePic1(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this.URL1 = ''
			},
			deletePic2(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this.URL2 = ''
			},
			handleNext() {
				let that = this
				if(this.URL1 == '' || this.URL2 == ''){
					uni.showToast({
						title:that.$t('login.ContractEmpty'),
						icon:'none'
					})
					return false
				}
				let userObj = uni.getStorageSync('userObj')
				userObj.contractBookletPhoto = this.URL1 + ',' + this.URL2
				uni.setStorageSync('userObj', userObj)

				uni.navigateTo({
					url:'/pages/login/identityCard/identityCard'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.contract {

		.uploadMain {
			width: 100%;
			height: calc(100% - 100px);

			.topLine {
				width: 100%;
				height: 8px;
				background-color: #F2F3F5;

			}

			.tilte {
				font-size: 14px;
				margin-bottom: 10px;
				color: #1D2129;
				padding: 0 16px;
				box-sizing: border-box;
			}

			.titleTips {
				font-size: 12px;
				color: #96909C;
				margin-bottom: 20px;
				padding: 0 16px;
				box-sizing: border-box;
			}

		}

		.uploadBox {
			width: 300px;
			margin: 16px auto;
			box-sizing: border-box;

			.uploadTips {
				text-align: center;

				text {
					color: var(--subjectColor);
					margin-left: 8px;
				}
			}
		}

		.btnModule {
			width: 100%;
			height: 44px;
			box-sizing: border-box;
			margin-top: 16px;
			padding: 16px;
			box-sizing: border-box;
		}
	}
</style>